<template>
  <div class="tag-editor">
    <div v-if="!isEditing" class="tag-display">
      <va-chip 
        v-for="tag in modelValue" 
        :key="tag"
        color="secondary"
        size="small"
        class="tag-chip"
        closable
        @close="removeTag(tag)"
      >
        {{ tag }}
      </va-chip>
      
      <va-button 
        v-if="!readonly"
        icon="edit" 
        size="small" 
        flat 
        @click="startEditing"
      >
        编辑标签
      </va-button>
    </div>
    
    <div v-else class="tag-edit-form">
      <va-input
        v-model="tagInput"
        placeholder="输入标签，用逗号分隔"
        @keydown.enter="saveChanges"
      />
      
      <div class="tag-actions">
        <va-button 
          color="primary" 
          size="small"
          :loading="saving"
          @click="saveChanges"
        >
          保存
        </va-button>
        
        <va-button 
          flat 
          size="small"
          @click="cancelEditing"
        >
          取消
        </va-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import { updateTags } from '../api/uploads'

const props = defineProps({
  modelValue: {
    type: Array,
    default: () => []
  },
  itemId: {
    type: String,
    required: true
  },
  readonly: {
    type: Boolean,
    default: false
  },
  syncOnSave: {
    type: Boolean,
    default: true
  }
})

const emit = defineEmits(['update:modelValue', 'tags-updated'])

const isEditing = ref(false)
const saving = ref(false)
const tagInput = ref('')

// 开始编辑时，将当前标签转为逗号分隔的字符串
const startEditing = () => {
  if (props.readonly) return
  tagInput.value = props.modelValue.join(', ')
  isEditing.value = true
}

// 取消编辑
const cancelEditing = () => {
  isEditing.value = false
  tagInput.value = ''
}

// 移除特定标签
const removeTag = async (tagToRemove) => {
  if (props.readonly) return
  
  const newTags = props.modelValue.filter(tag => tag !== tagToRemove)
  
  try {
    saving.value = true
    await updateTags(props.itemId, newTags, props.syncOnSave)
    emit('update:modelValue', newTags)
    emit('tags-updated', newTags)
  } catch (error) {
    console.error('更新标签失败:', error)
  } finally {
    saving.value = false
  }
}

// 保存所有标签
const saveChanges = async () => {
  if (props.readonly || saving.value) return
  
  const newTags = tagInput.value
    .split(',')
    .map(tag => tag.trim())
    .filter(tag => tag)
  
  try {
    saving.value = true
    await updateTags(props.itemId, newTags, props.syncOnSave)
    emit('update:modelValue', newTags)
    emit('tags-updated', newTags)
    isEditing.value = false
  } catch (error) {
    console.error('更新标签失败:', error)
  } finally {
    saving.value = false
  }
}
</script>

<style scoped>
.tag-editor {
  margin: 0.5rem 0;
}

.tag-display {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.tag-chip {
  margin-right: 0.25rem;
}

.tag-edit-form {
  margin-top: 0.5rem;
}

.tag-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
</style> 